<template>
	<view class="u-p-30">
		<view class="bg_FFFFFF u-p-20 u-b-r-14">
			<view class="cl_1C1C1CFF u-weight">注销原因</view>
			<view class="u-m-t-20">
				<view v-for="(item,index) in list" :key="index" @click="choes(item)" class="u-b-r-13 u-m-l-10 u-m-t-10 u-font-20" style="border: 1rpx solid #C1C1C1; display: inline-block; padding: 10rpx 20rpx;" :class="item.id==arr.id?'bores':''">
					{{item.text}}
				</view>
			</view>
			
			
			<view class="cl_1C1C1CFF u-m-t-30 u-weight">意见反馈</view>
			<view class="u-m-t-20 u-p-20" style="background-color:#C2C7D01A ; border: 1rpx solid #C1C1C1;">
				<u-input v-model="value" type="textarea" maxlength='200' :border="false" :clearable='false' placeholder='请输入您的意见,我们会认真聆听' @input='change'/>
				<view class="u-w-600" style="text-align: right;color: #97A0AEFF;">{{text}}/200</view>
			</view>
		</view>
		<view class="u-w-600 u-h-100 u-l-h-100 u-text-center u-fix u-b-50 u-m-l-30 u-b-r-13 cl_FFF" style="background: linear-gradient(-64deg, #FF382C, #FF633F);" @click="save">提交</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:[],
				value:"",
				text:0,
				list:[
					{
						id:1,
						text:"性能问题",
						status:0
					},
					{
						id:2,
						text:"产品未达到预期效果",
						status:0
					},
					{
						id:3,
						text:"性能问题/bug多",
						status:0
					},
					{
						id:4,
						text:"重新注册账号",
						status:0
					},
					{
						id:5,
						text:"没有找到想要的服务",
						status:0
					}
				]
			}
		},
		methods: {
			change(){
				console.log(this.value);
				this.text=this.value.length
			},
			choes(item){
				
				this.arr=item
				console.log(this.arr);
			},
			// 点击提交
			save(){
				if(this.arr.length==0){
					uni.showToast({
						icon:'none',
						title:'请选择原因'
					})
				}else if(this.value.trim()==''){
					uni.showToast({
						icon:'none',
						title:'请填写你的意见'
					})
				}else{
					this.$api.remove_massage({},res=>{
					console.log(res);
					if(res.data.code==1){
						uni.showToast({
							icon:'none',
							title:'反馈成功'
						})
						setTimeout(()=>{
							uni.navigateBack()
						},500)
					}else{
						uni.showToast({
							icon:'none',
							title:res.data.msg
						})
					}
				})
				}
				
			},
		}
	}
</script>

<style scoped>
page {
		background-color: #F5F5F5FF;
	}
	.bores{
		border: 1rpx solid #FC3533FF;
		background-color:#FFEAEAFF ;
		color: #FC3533FF;
	}
</style>
